<script setup lang="ts">
import ChannelNav from "../../components/ChannelNav.vue";
import ArticleList from "../../components/ArticleList.vue";
import { onMounted, ref } from "vue";
import { getChannelAPI } from "@/api/channel";
import type { ChannelItem } from "@/types";

onMounted(() => {
  //获取频道数据
  getChannel();
});
const activeId = ref(0);
const channelList = ref<ChannelItem[]>([]);
const getChannel = async () => {
  const resule = await getChannelAPI();
  channelList.value = resule.channels;
  activeId.value = resule.channels[0].id;
};

const updateActiveId = (id: number) => {
  activeId.value = id;
};
</script>
<template>
  <ChannelNav
    @updateActiveId="updateActiveId"
    :channels="channelList"
    :activeId="activeId"
  ></ChannelNav>
  <ArticleList :active-id="activeId"></ArticleList>
</template>
<style scoped></style>
